<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Bootstrap 的 CSS 文件 -->
    <link href="./css/bootstrap@5.1.3/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="./css/bootstrap@5.1.3/bootstrap-icons.css" />
    <link rel="stylesheet" href="./css/base.css" />
    <script src="./js/plugins/holder/holder.js"></script>
    <title>购物车</title>
    <style>
      .cart-num {
        color: #e42825;
        font-size: 1.4em;
        font-weight: bold;
      }

      .cart-info {
        background-color: #f3f3f3;
        padding: 10px 0px;
        font-size: 0.9em;
        color: #6d6b6b;
      }

      .cart-info a{
        text-decoration: none;
        color:#6d6b6b;
      }

      .price{
        color:#e42825;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <!-- 顶部导航 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light nvarbar-padding">
      <div class="container">
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarText"
          aria-controls="navbarText"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse pt-3 pt-lg-0" id="navbarText">
          <span class="navbar-text me-auto">
            欢迎光临,请 <a href="#">登录</a> 成为会员
          </span>

          <ul class="navbar-nav mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="index.html">首页</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="my.html">我的</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- 顶部导航 end-->
    <!-- 顶部导航 end-->
    <main class="container">
      <!-- 搜素框 -->
      <div class="row justify-content-between">
        <div class="col-lg-auto d-none d-lg-block mt-3">
          <a href="#">
            <img src="./images/logo.png" alt="" />
          </a>
        </div>
        <div class="col-md-6 p-md-3 mt-3 mt-lg-0">
          <div class="input-group">
            <input
              type="text"
              class="form-control"
              style="outline: 1px solid #dc3545"
              placeholder="Recipient's username"
              aria-label="Recipient's username"
              aria-describedby="button-addon2"
            />
            <button
              class="btn btn-danger btn-lg"
              type="button"
              style="outline: 1px solid #dc3545"
              id="button-addon12"
            >
              &nbsp;&nbsp;<i class="bi-search"></i>&nbsp;&nbsp;
            </button>
          </div>
        </div>
      </div>
      <!-- 搜素框 end -->
    </main>

    <div class="container" id="cartContent">

      <div class="row">
        <div class="col-auto">
          <span class="cart-num">全部商品</span>
        </div>
      </div>
      <div class="row cart-info align-items-center">
        <div class="col-lg-1  d-flex align-items-center justify-content-center d-none d-lg-block">
          <input type="checkbox" />&nbsp;全选
        </div>
        <div class="col-lg-5 col-12">商品</div>
        <div class="col-1 d-none d-lg-block">单价</div>
        <div class="col-2 d-none d-lg-block text-center">数量</div>
        <div class="col-1 d-none d-lg-block">小计</div>
        <div class="col-2 d-none d-lg-block">操作</div>
      </div>
      <!-- 一条商品信息 -->
      <div class="row cart-info align-items-center mt-3">
        <div
          class="
            col-1
            d-flex
            align-items-center
            justify-content-center
            d-none d-lg-block
          "
        >
          <input type="checkbox" />
        </div>
        <div class="col-lg-5 col-12">
          <img src="holder.js/60x60" alt="" />
          Java从入门到精通（第5版）【软件开发视频大讲堂】
        </div>
        <div class="col-lg-1 col-2">￥ 23.00</div>
        <div class="col-lg-2 col-4">
          <div class="input-group input-group-sm justify-content-center">
            <button
              class="btn btn-outline-secondary"
              type="button"
              id="button-addon3"
            >
              -
            </button>
            <input
              type="text"
              class="form-control"
              value="1"
              style="max-width: 40px"
            />
            <button
              class="btn btn-outline-secondary"
              type="button"
              id="button-addon2"
            >
              +
            </button>
          </div>
        </div>
        <div class="col-1 d-none d-lg-block">￥ 23.00</div>
        <div class="col-lg-2 col-2">
          <a href="#">删除</a>
          <a href="#" class="d-none d-lg-block">加入收藏夹</a>
        </div>
      </div>

      <!-- 一条商品信息
      <div class="row cart-info align-items-center mt-3">
        <div class="col-1 d-flex align-items-center justify-content-center d-none d-lg-block">
          <input type="checkbox" />
        </div>
        <div class="col-lg-5 col-12">
          <img src="holder.js/60x60" alt="" />
          Java从入门到精通（第6版）【软件开发视频大讲堂】
        </div>
        <div class="col-lg-1 col-2">￥ 23.00</div>
        <div class="col-lg-2 col-4">
          <div class="input-group input-group-sm justify-content-center">
            <button  class="btn btn-outline-secondary" type="button" id="button-addon4" >
              -
            </button>
            <input type="text" class="form-control" value="1" style="max-width: 40px" />
            <button class="btn btn-outline-secondary" type="button" id="button-addon5" >
              +
            </button>
          </div>
        </div>
        <div class="col-1 d-none d-lg-block">￥ 23.00</div>
        <div class="col-lg-2 col">
          <a href="#">删除</a>
          <a href="#" class="d-none d-lg-block">加入收藏夹</a>
        </div>
      </div>
      -->
      <!-- 一条商品信息
      <div class="row cart-info align-items-center mt-3">
        <div
          class="
            col-1
            d-flex
            align-items-center
            justify-content-center
            d-none d-lg-block
          "
        >
          <input type="checkbox" />
        </div>
        <div class="col-lg-5 col-12">
          <img src="holder.js/60x60" alt="" />
          Java从入门到精通（第6版）【软件开发视频大讲堂】
        </div>
        <div class="col-lg-1 col-2">￥ 23.00</div>
        <div class="col-lg-2 col-4">
          <div class="input-group input-group-sm justify-content-center">
            <button
              class="btn btn-outline-secondary"
              type="button"
              id="button-addon7"
            >
              -
            </button>
            <input
              type="text"
              class="form-control"
              value="1"
              style="max-width: 40px"
            />
            <button
              class="btn btn-outline-secondary"
              type="button"
              id="button-addon1"
            >
              +
            </button>
          </div>
        </div>
        <div class="col-1 d-none d-lg-block">￥ 23.00</div>
        <div class="col-lg-2 col-2">
          <a href="#">删除</a>
          <a href="#" class="d-none d-lg-block">加入收藏夹</a>
        </div>
      </div>
        一条商品信息  end-->
      <!-- 底部信息栏
      <div class="row cart-info justify-content-end mt-3">
          <div class="col-lg-4">
            <a href="#">删除所选</a>
            <a href="#">全部删除</a>
             应付金额 <i class="price">￥123.45</i>
             <a href="order.html"  type="button" class="btn btn-outline-danger ml-3">结算</a>
          </div>
      </div>
       底部信息栏  end-->
    </div>

    <!-- 页脚 -->
    <footer class="doc-footer" style="position: absolute;bottom: 0;">&copy;湖南农业大学</footer>
    <!-- 页脚 end -->

    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->
    <!-- 选项 1：包含 Popper 的 Bootstrap 集成包 -->
    <script src="./js/plugins/bootstrap@5.1.3/bootstrap.bundle.min.js"></script>

    <!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
    <!--<script src="./js/plugins/bootstrap@5.1.3/popper.min.js"></script>
<script src="./js/plugins/bootstrap@5.1.3/bootstrap.min.js"></script>-->
    <script>
      let cartContent =document.querySelector("#cartContent");

      fetch("../load.cart").then(response =>response.json()).then(result=>{
          if(result.success){
             loadCartItem(result);
          }
      });

      let loadCartItem=(result)=>{
        let itemValue=`<div class="row">
                          <div class="col-auto">
                            <span class="cart-num">全部商品</span>
                          </div>
                        </div>
                        <div class="row cart-info align-items-center">
                          <div class="col-lg-1  d-flex align-items-center justify-content-center d-none d-lg-block">
                            <input type="checkbox" />&nbsp;全选
                          </div>
                          <div class="col-lg-5 col-12">商品</div>
                          <div class="col-1 d-none d-lg-block">单价</div>
                          <div class="col-2 d-none d-lg-block text-center">数量</div>
                          <div class="col-1 d-none d-lg-block">小计</div>
                          <div class="col-2 d-none d-lg-block">操作</div>
                        </div>`;
        for(let item of result.data.items){
          let book = item.product;
          itemValue+=`<div class="row cart-info align-items-center mt-3">
                                <div class="col-1 d-flex align-items-center justify-content-center d-none d-lg-block">
                                  <input type="checkbox" />
                                </div>
                                <div class="col-lg-5 col-12">
                                  <img src="images/books/${book.pic}" style="width:60px;height:60px" alt="" />
                                  ${book.title}
                                </div>
                                <div class="col-lg-1 col-2">￥${book.price}</div>
                                <div class="col-lg-2 col-4">
                                  <div class="input-group input-group-sm justify-content-center">
                                    <button  class="btn btn-outline-secondary" type="button" data-id="${book.id}" onclick="subValue(this)">
                                      -
                                    </button>
                                    <input type="text" class="form-control" id="qtyInput${book.id}" value="${item.qty}" style="max-width: 40px" />
                                    <button class="btn btn-outline-secondary" type="button" data-id="${book.id}" onclick="addValue(this)">
                                      +
                                    </button>
                                  </div>
                                </div>
                                <div class="col-1 d-none d-lg-block">￥${book.price*item.qty}</div>
                                <div class="col-lg-2 col">
                                  <a href="#">删除</a>
                                  <a href="#" class="d-none d-lg-block">加入收藏夹</a>
                                </div>
                              </div>`;
        }
        itemValue+=`<!-- 底部信息栏 -->
                        <div class="row cart-info justify-content-end mt-3">
                            <div class="col-lg-4">
                              <a href="#">删除所选</a>
                              <a href="#">全部删除</a>
                               应付金额 <i class="price">￥${result.data.account}</i>
                               <a href="order.html"  type="button" class="btn btn-outline-danger ml-3">结算</a>
                            </div>
                        </div>`;

        let subDom=document.createRange().createContextualFragment(itemValue);
        cartContent.innerHTML='';
        cartContent.appendChild(subDom)
      }

      let addValue=(addBtn)=>{
         let id=  addBtn.dataset.id;
         let qtyInput =document.querySelector(`#qtyInput${id}`);
         qtyInput.value =parseInt(qtyInput.value)+1;

         fetch(`../addQty.cart?id=${id}&qty=${qtyInput.value}`).then(response=>response.json()).then(result=>{
             if(result.success){
               loadCartItem(result);
             }
         })
      }
    </script>
  </body>
</html>
